<template>
	<view class="login-icon-list u-f">
		<!-- <view class="login-weixin icon iconfont icon-weixin"></view>
		<view class="login-QQ icon iconfont icon-QQ"></view>
		<view class="login-xinlangweibo icon iconfont icon-xinlangweibo"></view> -->
		<block v-for="(value,key) in providerList" :key="key">
			<view class="icon iconfont" @click="tologin(value)"  :class="[' icon-'+(value.icon?value.icon:'')]"></view>
		</block>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				providerList: []
			}
		},
		mounted() {
			this.getLoginauth()
		},
		methods:{
			tologin(provider) {
				uni.login({
					provider: provider.id,
			        // #ifdef MP-ALIPAY
			        scopes: 'auth_user',  //支付宝小程序需设置授权类型
			        // #endif
					success: (res) => {
						console.log('login success:', JSON.stringify(res));
						
					},
					fail: (err) => {
						console.log('login fail:', err);
					}
				});
			},
			getLoginauth(){
				console.log("hello")
				uni.getProvider({
					service: 'oauth',
					success: (result) => {
						this.providerList = result.provider.map((value) => {
							let providerName = '';
							let icon = "";
							switch (value) {
								case 'weixin':
									providerName = '微信登录'
									icon="weixin"
									break;
								case 'qq':
									providerName = 'QQ登录'
									icon="QQ"
									break;
								case 'sinaweibo':
									providerName = '新浪微博登录'
									icon="xinlangweibo"
									break;
								case 'alipay':
									providerName = '支付宝登录'
									icon="alipay"
									break;
							}
							return {
								name: providerName,
								icon:icon,
								id: value
							}
						});
							 // console.log(JSON.stringify(this.providerList))
							
					},
					fail: (error) => {
						console.log('获取登录通道失败', error);
					}
				});
			} 
		}
	}
</script>

<style scoped>
	.login-icon-list {
		padding: 20upx 150upx;
		justify-content: space-between;
		
	}
	.login-icon-list > view {
		color:#FFFFFF;
		font-size: 45upx;
		width:100upx;
		height:100upx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.login-icon-list view:nth-of-type(1){
		background: #2BD19B;
	}
	.login-icon-list view:nth-of-type(2){
		background: #2CAEFC;
	}
	.login-icon-list view:nth-of-type(3){
		background: #FC7729;
	}
	.login-zhanghao {
		margin: 20upx 0
	}
	
</style>
